<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//http://localhost:8080/logistics/
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<article class="page-container">
	<form class="form form-horizontal" id="roleForm" method="post" action="${role!=null ? 'role/update.do':'role/insert.do'}">
	<!-- 隐藏域，修改的时候根据id修改 -->
	<input type="hidden" name="roleId" value="${role.roleId}">
	<!-- 权限id数据 -->
	<input type="hidden" id="permissionIds" name="permissionIds" >
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<input type="text" class="input-text"  value="${role.rolename}" placeholder="请输入角色名称" id="rolename" name="rolename">
		</div>
	</div>
	
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色描述：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<textarea name="remark"  class="textarea"  placeholder="角色说明"  >${role.remark}</textarea>
		</div>
	</div>
	<div class="row cl">
		<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色权限：</label>
		<div class="formControls col-xs-8 col-sm-9">
			<ul id="permissionTree" class="ztree"></ul>
		</div>
	</div>
	
	<div class="row cl">
		<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
			<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
		</div>
	</div>
	</form>
</article>

<!--_footer 作为公共模版分离出去--> 
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>





<script type="text/javascript">
	
	$(function(){
	/* 使用表单校验插件 */
		$("#roleForm").validate({
			//规则
			rules: {
				rolename:{
					required:true,
				},
				remark:{
					required:true,
					maxlength:20
				}
				
			},
			//校验失败提示消息
			messages:{
				rolename:{
					required:"角色名称不能为空",
				},
				remark:{
					required:"角色m描述不能为空",
					maxlength:"角色描述不能超过20个汉字"
				}
				
				
			},
			//校验成功回调函数
			submitHandler:function(form){
				
				/*
					1.获取ztree的选中数据 （权限id拼接的字符串）:  1,2,3,4,5,8,10
					2.将获取的数据设置表单的 权限数据对应的隐藏域
				*/
				getCheckedData();
				
				
				$(form).ajaxSubmit(function(data){
					console.log(data);
					layer.msg(data.msg,{time:1500,icon:data.code},function(){
						
						if(data.code == 1){
							//调用父页面的刷新表格方法（一定要先调用，再关闭）
							parent.refreshTable();
							//让父页面关闭所有弹出层
							parent.layer.closeAll();
						}
					});
				});
			}
			
		});
		
		
	});
	
	//========================zTree插件相关js============================
	
			//获取zTree选中的数据
	function getCheckedData(){
		
		//获取zTree对象 ，（不是jquery的id选择的器，没有 #）
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		
		//获取所有选中的节点
		var nodes = treeObj.getCheckedNodes(true);
		//声明一个数组，存放节点的id
		var permissionIdsArr = [];
		for(var i=0;i<nodes.length;i++){
			var node = nodes[i];
			//将节点id添加到数组中
			permissionIdsArr.push(node.permissionId);
		}
		
		console.log(permissionIdsArr);
		/*
			将数组转换成字符串 :
				1,toString方法自定将数组以逗号分割转换成字符串
				2,join("连接符")方法将数组以分割转换成字符串
		*/
		//var permissionIdsStr = permissionIdsArr.toString();
		var permissionIdsStr = permissionIdsArr.join(",");
		
		//将获取的数据设置表单的 权限数据对应的隐藏域
		$("#permissionIds").val(permissionIdsStr);		
	}
		
		
		//1.zTree 设置 默认为控
		var setting = {
			check: {enable: true},
			data: {
				simpleData: {
					enable: true,
					pIdKey:'parentId',
					idKey:'permissionId'
				}
			},
			//异步加载
			async:{
				enable: true,
				url:'permission/getAllPermission.do',
				//异步加载过滤设置：在zTree渲染之前过滤
				dataFilter: filter
			},
			//异步加载完毕以后回调函数
			callback: {
				onAsyncSuccess: zTreeOnAsyncSuccess
			}
			
		}
		
		/* 
		异步加载完毕以后回调的函数
		在此函数内部完成权限数据的回显
		
		思路：
		1，拆分后台共享的当前角色对应的权限id的字符串
		
		var permissionIds = "58,57,74,75,76,77,31,32,33,34,35"
		
		var permissionIdsArr = permissionIds.split(",");
		
		
		2,获取zTree对象，并根据zTree的一个根据属性的值获取节点的方法（当前场景，根据permissionId的值获取节点）
		
		3,让其第二步获取的对应的节点选中即可（完成数据库回显）
		
		
	*/
	
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		//1，拆分后台共享的当前角色对应的权限id的字符串
		var permissionIds = "${role.permissionIds}";
		var permissionIdsArr = permissionIds.split(",");
		console.log(permissionIdsArr);
		
		//2,获取zTree对象，并根据zTree的一个根据属性的值获取节点的方法（当前场景，根据permissionId的值获取节点）
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		
		for(var i = 0 ;i<permissionIdsArr.length;i++){
			//获取指定permissionId属性值的节点
			var node = treeObj.getNodeByParam("permissionId", permissionIdsArr[i], null);
			console.log(node);
			
			//让其节点选中
			treeObj.checkNode(node, true, false);
		}
		
	}
		
		
		//异步加载数据完毕以后过滤函数，可以在此函数中过滤器原有的数据或者在原有数据上新增数据
		function filter(treeId, parentNode, childNodes) {
			console.log(treeId,parentNode,childNodes);
			
			//循环出所有数据，并且新增一个open属性
			for (var i=0;i<childNodes.length;i++) {
				var childNode = childNodes[i];
				childNode.open=true;
			}
			console.log(treeId,parentNode,childNodes);
			return childNodes;
		}
	
	
		$(function(){
			//初始化zTree
			$.fn.zTree.init($("#permissionTree"), setting);
		});
	
		
		
	//========================zTree插件相关js============================
	
	
	
	
	
</script> 
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>